<template>
  <view class="page-view">
  	  <view class="top-bg">
  	  	<view class="return" @click="goToBack()">
  	  		<u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
  	  	</view>		
  	  	新建作业申请	
  	  </view>
  <view class="posBox" :style="{ height: 'calc(100vh - 392rpx)' }">
	  <scroll-view scroll-y="true" class="scroll-Y">
		<u--form ref="uForm1" :model="form" labelWidth="220" labelPosition="left">
				<view class="form-item-wrap">
					<u-form-item label="申报日期" prop="approvalDate" @click="showSelectApproval = true;hideKeyboard();" required
						borderBottom customStyle="height:50rpx;">
						<u--input v-model="form.approvalDate" disabled disabledColor="#fff" border="none"
							placeholder="请选择"></u--input>
					</u-form-item>
					<u-form-item label="作业编号" prop="workNo" required borderBottom customStyle="height:50rpx;">
						<u--input
							v-model="form.workNo"
							border="none"
							placeholder="请输入"
						></u--input>
					</u-form-item>
					<u-form-item label="作业内容" borderBottom customStyle="height:50rpx;" required>
						<u--input v-model="form.workDetail" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item
						label="作业位置"
						prop="workArea"
						required
						borderBottom
						customStyle="height:50rpx;"
						@click="selectAddress"
					>
						<u--input v-model="form.workArea" disabled border="none" placeholder="请选择" disabledColor="#fff">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="主要危险源" borderBottom customStyle="height:50rpx;" required>
						<u--input v-model="form.dangerSource" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="作业风险等级" borderBottom customStyle="height:50rpx;">
						<view class="" style="display: flex;">
						<view class="default" :class="form.riskLevel==1?'checked':''" @click="riskLevelFn(index,1)">高风险</view>
						<view class="default" :class="form.riskLevel==2?'checked':''" @click="riskLevelFn(index,2)">一般风险</view>
						</view>
					</u-form-item>
					<u-form-item required label="作业单位名称" borderBottom customStyle="height:50rpx;">
						<u--input v-model="form.workUnit" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item required label="作业单位地址" borderBottom customStyle="height:50rpx;">
						<u--input v-model="form.workUnitPosition" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item required label="作业联系人" borderBottom customStyle="height:50rpx;">
						<u--input v-model="form.workContact" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item required label="联系人电话" borderBottom customStyle="height:50rpx;">
						<u--input v-model="form.contactTel" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<view class="note-red">
						<view class="" style="margin-top: 4rpx;"><image class="img" src=".././../static/icon/note-red.png" mode=""></image></view>
						是否经安全培训或岗前培训
						</view>
						<u-form-item required label="现场作业负责人" borderBottom customStyle="height:50rpx;">
							<u-row justify="space-between" gutter="10">
								<u-col span="6">
										<u--input v-model="form.siteManager" border="none" placeholder="请输入"></u--input>
								</u-col>
								<u-col span="6">
										<u-radio-group v-model="form.siteManagerStatus" placement="row" >
											<u-radio activeColor="#0be583" size="32" iconSize="30" labelSize='28' name="1" label="是" :customStyle="{ marginRight: '18px' }"></u-radio>
											<u-radio activeColor="#0be583" size="32" iconSize="30" labelSize='28' name="2" label="否" ></u-radio>
										</u-radio-group>
								</u-col>
							</u-row>
						</u-form-item>
						<u-form-item required label="监护人员" borderBottom customStyle="height:50rpx;">
							<u-row justify="space-between" gutter="10">
								<u-col span="6">
										<u--input v-model="form.siteGuardian" border="none" placeholder="请输入"></u--input>
								</u-col>
								<u-col span="6">
										<u-radio-group v-model="form.siteGuardianStatus" placement="row" >
											<u-radio activeColor="#0be583" size="32" iconSize="30" labelSize='28' name="1" label="是" :customStyle="{ marginRight: '18px' }"></u-radio>
											<u-radio activeColor="#0be583" size="32" iconSize="30" labelSize='28' name="2" label="否" ></u-radio>
										</u-radio-group>
								</u-col>
							</u-row>
						</u-form-item>
						<u-form-item required label="作业人员" borderBottom customStyle="height:50rpx;">
							<u-row justify="space-between" gutter="10">
								<u-col span="6">
										<u--input v-model="form.siteWorker" border="none" placeholder="请输入"></u--input>
								</u-col>
								<u-col span="6">
										<u-radio-group v-model="form.siteWorkerStatus" placement="row" >
											<u-radio activeColor="#0be583" size="32" iconSize="30" labelSize='28' name="1" label="是" :customStyle="{ marginRight: '18px' }"></u-radio>
											<u-radio activeColor="#0be583" size="32" iconSize="30" labelSize='28' name="2" label="否" ></u-radio>
										</u-radio-group>
								</u-col>
							</u-row>
						</u-form-item>
						<u-form-item required label="监管人员" borderBottom customStyle="height:50rpx;">
							<u-row justify="space-between" gutter="10">
								<u-col span="6">
										<u--input v-model="form.siteSupervisor" border="none" placeholder="请输入"></u--input>
								</u-col>
								<u-col span="6">
										<u-radio-group v-model="form.siteSupervisorStatus" placement="row" >
											<u-radio activeColor="#0be583" size="32" iconSize="30" labelSize='28' name="1" label="是" :customStyle="{ marginRight: '18px' }"></u-radio>
											<u-radio activeColor="#0be583" size="32" iconSize="30" labelSize='28' name="2" label="否" ></u-radio>
										</u-radio-group>
								</u-col>
							</u-row>
						</u-form-item>
					<u-form-item label="计划作业时间起" prop="planWorkDateBegin" @click="showSelectSt = true;hideKeyboard();" required
						borderBottom customStyle="height:50rpx;">
						<u--input v-model="form.planWorkDateBegin" disabled disabledColor="#fff" border="none"
							placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="计划作业时间止" prop="planWorkDateEnd" @click="showSelectEd = true;hideKeyboard();" required
						borderBottom customStyle="height:50rpx;">
						<u--input v-model="form.planWorkDateEnd" disabled disabledColor="#fff" border="none"
							placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view class="title">
						<view class="line-left"></view>所附材料上传
					</view>
						  <view class="info-row"><text>安全交底资料</text><view class="uploadButton" @click="upLoadFile(1)">
						      <image class="upload" src="@/static/yunwei/upload.png"></image>点击上传文件
						    </view>
						  </view>
						  <view class="fileName" style="display: flex;justify-content: space-between;">
						    {{aqjdFile.name}}
						    <view v-if="aqjdFile.name" style="color: #4a4a4a;" @click="deleteFile(1)">删除</view>
						  </view>
						  <view class="info-row"><text>培训资料</text><view class="uploadButton" @click="upLoadFile(2)">
						      <image class="upload" src="@/static/yunwei/upload.png"></image>点击上传文件
						    </view>
						  </view>
						  <view class="fileName" style="display: flex;justify-content: space-between;">
						    {{pxFile.name}}
						    <view v-if="pxFile.name" style="color: #4a4a4a;" @click="deleteFile(2)">删除</view>
						  </view>
						  <view class="info-row"><text>器材机具清单</text><view class="uploadButton" @click="upLoadFile(3)">
						      <image class="upload" src="@/static/yunwei/upload.png"></image>点击上传文件
						    </view>
						  </view>
						  <view class="fileName" style="display: flex;justify-content: space-between;">
						    {{qcjjFile.name}}
						    <view v-if="qcjjFile.name" style="color: #4a4a4a;" @click="deleteFile(3)">删除</view>
						  </view>
						  <view class="info-row"><text>作业方案</text><view class="uploadButton" @click="upLoadFile(4)">
						      <image class="upload" src="@/static/yunwei/upload.png"></image>点击上传文件
						    </view>
						  </view>
						  <view class="fileName" style="display: flex;justify-content: space-between;">
						    {{zyfaFile.name}}
						    <view v-if="zyfaFile.name" style="color: #4a4a4a;"  @click="deleteFile(4)">删除</view>
						  </view>
						  <view class="info-row"><text>应急救援预案</text><view class="uploadButton" @click="upLoadFile(5)">
						      <image class="upload" src="@/static/yunwei/upload.png"></image>点击上传文件
						    </view>
						  </view>
						  <view class="fileName" style="display: flex;justify-content: space-between;">
						    {{yjjyFile.name}}
						    <view v-if="yjjyFile.name" style="color: #4a4a4a;" @click="deleteFile(5)">删除</view>
						  </view>
						  <view class="info-row"><text>其他资料</text><view class="uploadButton" @click="upLoadFile(6)">
						      <image class="upload" src="@/static/yunwei/upload.png"></image>点击上传文件
						    </view>
						  </view>
						  <view class="fileName" style="display: flex;justify-content: space-between;">
						    {{qtFile.name}}
						    <view v-if="qtFile.name" style="color: #4a4a4a;" @click="deleteFile(6)">删除</view>
						  </view>
				</view>
		</u--form>
		</scroll-view>
  </view>
  <u-datetime-picker :show="showSelectApproval" v-model="dateApproval" mode="date" @confirm="confirmApproval"
  			@cancel="showSelectApproval=false"></u-datetime-picker>
<u-datetime-picker :show="showSelectSt" v-model="dateSt" mode="datetime" @confirm="confirmSt"
			@cancel="showSelectSt=false"></u-datetime-picker>
		<u-datetime-picker :show="showSelectEd" v-model="dateEd" mode="datetime" @confirm="confirmEd"
			@cancel="showSelectEd=false"></u-datetime-picker>
  <view class="submitBtn">
  	<u-button @click="submit" :loading="loading" class="custom-style" customStyle="width:80%"
  		text="提交"  color="#428ffc" throttleTime="1000">
  	</u-button>
  </view>
  </view>
</template>
<script>
	import {addSpaceWork} from '@/api/spaceWork.js';
	import {commonUploadFile2,commonUploadPic} from '@/api/common.js';
  export default {
    components:{
     
    },
    data() {
      return {
		 showSelectSt: false,
		 showSelectEd: false,
		 showSelectApproval:false,
		 dateApproval:Number(new Date()),
		 dateSt: Number(new Date()),
		 dateEd: Number(new Date()),
		 form: {
		 	approvalDate:'',
			workNo:'',
			workDetail:'',
			workArea:'',
			dangerSource:'',
			workUnit:'',
			workUnitPosition:'',
			workContact:'',
			contactTel:'',
			planWorkDateBegin:'',
			planWorkDateEnd:'',
			siteManager:'',
			riskLevel:'2',
			siteManagerStatus:'1',
			siteGuardian:'',
			siteGuardianStatus:'1',
			siteWorker:'',
			siteWorkerStatus:'1',
			siteSupervisor:'',
			siteSupervisorStatus:'1',
		 },
		 aqjdFile: {
		   name: '',
		   path: ''
		 },
		 pxFile: {
		   name: '',
		   path: ''
		 },
		 qcjjFile: {
		   name: '',
		   path: ''
		 },
		 zyfaFile: {
		   name: '',
		   path: ''
		 },
		 yjjyFile: {
		   name: '',
		   path: ''
		 },
		 qtFile: {
		   name: '',
		   path: ''
		 },
      };
    },
	onShow() {
		
	},
    methods:{
     goToBack(){
      wx.navigateBack({
        delta: 1
      });
     },
	 hideKeyboard() {
	 	uni.hideKeyboard();
	 },
	selectAddress() {
		// 点击调起地图选择位置
		console.log('点击调起地图选择位置');
		const that = this;
		uni.authorize({
			scope: 'scope.userLocation',
			success(res) {
				console.log('success', res);
				// 选择位置
				uni.chooseLocation({
					success: function(res) {
						console.log('选择地点成功', res);
						that.form.workArea = res.address;
						that.$refs.uForm1.validateField('workArea');
					},
					fail(error) {
						console.log('选择位置失败', error);
						// console.log('选择位置失败', error)
					},
				});
			},
		});
	},
	confirmApproval(e){
		this.form.approvalDate = new Date(e.value).format('yyyy-MM-dd')
		this.showSelectApproval = false;
	},
	confirmSt(e){
		this.form.planWorkDateBegin = new Date(e.value).format('yyyy-MM-dd hh')
		this.showSelectSt = false;
	},
	confirmEd(e){
		this.form.planWorkDateEnd = new Date(e.value).format('yyyy-MM-dd hh')
		this.showSelectEd = false;
	},
	riskLevelFn(i,status){
		this.form.riskLevel=status
	},
	upLoadFile(type) {
	  wx.chooseMessageFile({
	    count: 10,
	    type: 'file',
	    success: async (res) => {
		  let fileName =res.tempFiles[0].name.lastIndexOf(".");//取到文件名开始到最后一个点的长度
		  let fileNameLength =res.tempFiles[0].name.length;//取到文件名长度
		  let name = res.tempFiles[0].name.substring(fileName + 1, fileNameLength);//截取文件的后缀名。
		  console.log('10.333333333333:',name);
		  let type2=name=='docx'?3:name=='xlsx'||name=='xls'?4:name=='pdf'?5:''
	      // 可以在这里进行后续操作
	      const result = await this.uploadFilePromise2(res.tempFiles[0].path,type2,res.tempFiles[0].name)
		  if(type==1){
			  this.aqjdFile = {
			     name: res.tempFiles[0].name,
			     path: result
			   }
		  }else if(type==2){
			  this.pxFile = {
			     name: res.tempFiles[0].name,
			     path: result
			   }
		  }else if(type==3){
			  this.qcjjFile = {
			     name: res.tempFiles[0].name,
			     path: result
			   }
		  }else if(type==4){
			  this.zyfaFile = {
			     name: res.tempFiles[0].name,
			     path: result
			   }
		  }else if(type==5){
			  this.yjjyFile = {
			     name: res.tempFiles[0].name,
			     path: result
			   }
		  }else{
			  this.qtFile = {
			     name: res.tempFiles[0].name,
			     path: result
			   }
		  }
	    }
	  })
	},
	async uploadFilePromise2(url,type,name) {
	  const res = await commonUploadFile2(url,type,name)
	  console.log(res, 'uploadHttp')
	  let d = JSON.parse(res.data)
	  if (d.code == 200) {
	    return d.result
	  }
	},
	deleteFile(type) {
	  if(type==1){
	  			  this.aqjdFile = {
	  			     name: '',
	  			     path: ''
	  			   }
	  }else if(type==2){
	  			  this.pxFile = {
	  			     name: '',
	  			     path: ''
	  			   }
	  }else if(type==3){
	  			  this.qcjjFile = {
	  			    name: '',
	  			    path: ''
	  			   }
	  }else if(type==4){
	  			  this.zyfaFile = {
	  			    name: '',
	  			    path: ''
	  			   }
	  }else if(type==5){
	  			  this.yjjyFile = {
	  			     name: '',
	  			     path: ''
	  			   }
	  }else{
	  			  this.qtFile = {
	  			     name: '',
	  			     path: ''
	  			   }
	  }
	},
	async submit(){
		const {
			approvalDate,
			workNo,
			workDetail,
			workArea,
			dangerSource,
			workUnit,
			workUnitPosition,
			workContact,
			contactTel,
			planWorkDateBegin,
			planWorkDateEnd,
			siteManager,
			siteGuardian,
			siteWorker,
			siteSupervisor,
		} = this.form;
		if (!approvalDate||!workNo||!workDetail||!workArea||!dangerSource||!workUnit||!workUnitPosition||!workContact||
		 !contactTel||!planWorkDateBegin||!planWorkDateEnd||!siteManager||!siteGuardian||!siteWorker||!siteSupervisor) {
			// uni.$u.toast('请填写必填信息');
			uni.showToast({
				title: '请填写必填信息',
				icon: 'error',
			});
			return;
		}
		if (!this.aqjdFile.name||!this.pxFile.name||!this.qcjjFile.name||!this.zyfaFile.name||!this.yjjyFile.name) {
		  uni.showToast({
		    icon: 'error',
		    title: '请先上传文件',
		  });
		  return;
		}
		
			  const res = await addSpaceWork({
				  ...this.form,
				  approvalDate:this.form.approvalDate+ ' ' + '00:00:00',
				  planWorkDateBegin:this.form.planWorkDateBegin+ ':00:00',
				  planWorkDateEnd:this.form.planWorkDateEnd+':00:00',
				  safetyBriefingFile:JSON.stringify(this.aqjdFile) === '{}' ? '' : JSON.stringify(this.aqjdFile),
				  trainingFile:JSON.stringify(this.pxFile) === '{}' ? '' : JSON.stringify(this.pxFile),
				  equListFile:JSON.stringify(this.qcjjFile) === '{}' ? '' : JSON.stringify(this.qcjjFile),
				  workFile:JSON.stringify(this.zyfaFile) === '{}' ? '' : JSON.stringify(this.zyfaFile),
				  rescueFile:JSON.stringify(this.yjjyFile) === '{}' ? '' : JSON.stringify(this.yjjyFile),
				  otherFile:JSON.stringify(this.qtFile) === '{}' ? '' : JSON.stringify(this.qtFile),
				  status:1
			  })
			  if (res.data.code == 200) {
			  	uni.showToast({
			  		title: '添加成功',
					icon: 'success',
					duration: 300
			  	})
				setTimeout(() => {
			  uni.navigateTo({
			  	url: '/subpack_YunWei/yxkjzy/index'
			  })
			  }, 500)
			  } else {
			  	uni.showToast({
			  		title: res.data.message,
			  		icon: 'none'
			  	})}
	},
    }
  }
</script>

<style lang="scss">
 .page-view {
	 position: relative;
   height: 100vh;
   // background: #f8f9fb;
   .submitBtn{
   	 position: absolute;
   	 bottom: 0;
   	 height: 144rpx;
   	 width: 100%;
   }
   .form-item-wrap{
	   margin-left: 28rpx;
	   font-size: 28rpx;
   }
   .posBox{
 	  position: absolute;
 	  top: 200rpx;
	  width: 656rpx;
	  font-weight: bold;
	  color: #4A4A4A;
	  background: #FFFFFF;
	  border-radius: 10rpx;
	  margin: 0 32rpx;
	  padding: 0 28rpx 28rpx 0;
	  .note-red{
		  font-weight: 400;
		  color: #FF0200;
		  margin-top: 14rpx;
		  display: flex;
		  align-items: center;
		  .img{
			  width: 30rpx;
			  height: 30rpx;
			  margin-right: 16rpx;
		  }
	  }
	  .default{
	  	width: 108rpx;
	  	height: 42rpx;
	  	border-radius: 6rpx;
	  	border: 1rpx solid rgba(39, 105, 247, 0.5);
	  	text-align: center;
	  	line-height: 43rpx;
	  	font-weight: bold;
	  	font-size: 25rpx;
	  	color: #3C8AFF;
	  	margin-right: 18rpx;
	  }
	  .checked{
	  	background: #2769F7;
	  	color: #FFFFFF;
	  }
	  .title {
	  	margin:28rpx 0;
	  	display: flex;
	  	align-items: center;
		font-size: 30rpx;
	  	.line-left {
	  		width: 8rpx;
	  		height: 20rpx;
	  		background: #2769F7;
	  		border-radius: 6rpx 6rpx 6rpx 6rpx;
	  		opacity: 0.6;
	  		margin-right: 12rpx;
	  	}
	  }
	  .info-row{
		  display: flex;
		  align-items: center;
		  margin-bottom: 24rpx;
		  text{
			  width: 36%;
		  }
		  .uploadButton {
		    width: 228rpx;
		    height: 64rpx;
		    background: #ffffff;
		    border-radius: 6rpx;
		    border: 1rpx solid #3c8aff;
		    font-weight: 400;
		    font-size: 24rpx;
		    color: #3c8aff;
		    line-height: 64rpx;
		    text-align: center;
		    .upload {
		      width: 27rpx;
		      height: 20rpx;
		      margin-right: 12rpx;
		      vertical-align: middle;
		    }
		  }
	  }
	  .fileName{
		  margin-bottom: 24rpx;
		  color: #3C8AFF;
		  font-weight: 500;
	  }
   }
 }

 .top-bg{
 	width: 100%;
 	height: 330rpx;
 	background: #2769F7;
 	border-radius: 0rpx 0rpx 140rpx 140rpx;
 	padding-top: 104rpx;
 	text-align: center;
 	font-weight: 600;
 	font-size: 40rpx;
 	color: #FFFFFF;
 	letter-spacing: 4rpx;
 	position: relative;
 	.return{
 		position: absolute;
 		left: 32rpx;
 		margin-top: 8rpx;
 	}
 }
 .scroll-Y {
 	height: 100%;
 }
 /deep/ .u-textarea{
 	border: 1rpx solid #efefef;
 	border-radius: 10rpx;
	text-align: left;
 }
 /deep/ .u-form-item__body__left__content__label{
	 font-size: 28rpx !important;
 }
</style>
